/*!
 * Toastify js 1.11.2
 * https://github.com/apvarun/toastify-js
 * @license MIT licensed
 * 
 * Copyright (C) 2018 Varun A P
 * 
 * Port to TypeScript by c5soft on 2021-01-11 
 * 
 */

import "./toastify.css"

export interface ToastifyOptions {
  oldestFirst?: boolean;
  text: string;// - Message to be displayed in the toast
  node?: Element;// Provide a node to be mounted inside the toast. node takes higher precedence over text
  duration?: number // Duration for which the toast should be displayed. -1 for permanent toast
  selector?: string | HTMLElement | ShadowRoot;// CSS ID Selector on which the toast should be added
  destination?: string;//URL to which the browser should be navigated on click of the toast
  newWindow?: boolean;// Decides whether the destination should be opened in a new window or not
  close?: boolean;// show the close icon or not
  gravity?: string;//To show the toast from top or bottom
  positionLeft?: boolean;
  position?: string;// To show the toast on left or right
  backgroundColor?: string; //Deprecated:! Please use the "style.background" property instead
  avatar?: string;//  Image/icon to be shown before text
  className?: string;// Ability to provide custom class name for further customization
  stopOnFocus?: boolean;// To stop timer when hovered over the toast (Only if duration is set)
  callback?: Function;//Invoked when the toast is dismissed
  onClick?: Function;// Invoked when the toast is clicked
  offset?: Record<"x" | "y", number>;// { x: Number; y: number; };// Ability to add some offset to axis
  escapeMarkup?: boolean;// Toggle the default behavior of escaping HTML markup
  style: Record<string, string>;// Use the HTML DOM style property to add styles to toast
}

interface HTMLDivElementEx extends HTMLDivElement {
  timeOutValue?: number;
}

class Toastify {
  defaultOptions: ToastifyOptions = {
    oldestFirst: true,
    text: "Toastify is awesome!",
    node: undefined,
    duration: 3000,
    selector: undefined,
    callback: function () { },
    destination: undefined,
    newWindow: false,
    close: false,
    gravity: "toastify-top",
    positionLeft: false,
    position: "right",
    backgroundColor: "",
    avatar: "",
    className: "",
    stopOnFocus: true,
    onClick: function () { },
    offset: { x: 0, y: 0 },
    escapeMarkup: true,
    style: { background: "" },
  };
  version: string;
  options: ToastifyOptions;
  toastElement: any;
  _rootElement: any;

  constructor(options: ToastifyOptions) {
    /**
     * The version of Toastify
     * @type {string}
     * @public
     */
    this.version = "1.11.2";

    /**
     * The configuration object to configure Toastify
     * @type {ToastifyConfigurationObject}
     * @public
     */
    this.options = this.defaultOptions;

    /**
     * The element that is the Toast
     * @type {Element}
     * @public
     */
    this.toastElement = null;

    /**
     * The root element that contains all the toasts
     * @type {Element}
     * @private
     */
    this._rootElement = document.body;

    this._init(options);
  }

  /**
   * Display the toast
   * @public
   */
  showToast() {
    // Creating the DOM object for the toast
    this.toastElement = this._buildToast();

    // Getting the root element to with the toast needs to be added
    if (typeof this.options.selector === "string") {
      this._rootElement = document.getElementById(this.options.selector);
    } else if (this.options.selector instanceof HTMLElement || this.options.selector instanceof ShadowRoot) {
      this._rootElement = this.options.selector;
    } else {
      this._rootElement = document.body;
    }

    // Validating if root element is present in DOM
    if (!this._rootElement) {
      throw "Root element is not defined";
    }

    // Adding the DOM element
    this._rootElement.insertBefore(this.toastElement, this._rootElement.firstChild);

    // Repositioning the toasts in case multiple toasts are present
    this._reposition();

    if ((this.options.duration || 0) > 0) {
      this.toastElement.timeOutValue = window.setTimeout(
        () => {
          // Remove the toast from DOM
          this._removeElement(this.toastElement);
        },
        this.options.duration
      ); // Binding `this` for function invocation
    }

    // Supporting function chaining
    return this;
  }

  /**
   * Hide the toast
   * @public
   */
  hideToast() {
    if (this.toastElement.timeOutValue) {
      clearTimeout(this.toastElement.timeOutValue);
    }
    this._removeElement(this.toastElement);
  }


  _init(options: ToastifyOptions) {

    // Setting defaults
    this.options = Object.assign(this.defaultOptions, options);

    if (this.options.backgroundColor) {
      // This is being deprecated in favor of using the style HTML DOM property
      console.warn('DEPRECATION NOTICE: "backgroundColor" is being deprecated. Please use the "style.background" property.');
    }

    this.toastElement = null;

    this.options.gravity = options.gravity === "bottom" ? "toastify-bottom" : "toastify-top"; // toast position - top or bottom
    this.options.stopOnFocus = options.stopOnFocus === undefined ? true : options.stopOnFocus; // stop timeout on focus
    if (options.backgroundColor) {
      this.options.style.background = options.backgroundColor;
    }
  }

  /**
   * Build the Toastify element
   * @returns {Element}
   * @private
   */
  private _buildToast() {
    // Validating if the options are defined
    if (!this.options) {
      throw "Toastify is not initialized";
    }

    // Creating the DOM object
    let divElement = document.createElement("div") as HTMLDivElementEx;
    divElement.className = `toastify on ${this.options.className}`;

    // Positioning toast to left or right or center (default right)
    divElement.className += ` toastify-${this.options.position}`;

    // Assigning gravity of element
    divElement.className += ` ${this.options.gravity}`;

    // Loop through our style object and apply styles to divElement
    for (const property in this.options.style) {
      (divElement.style as any)[property] = this.options.style[property];
    }

    // Adding the toast message/node
    if (this.options.node && this.options.node.nodeType === Node.ELEMENT_NODE) {
      // If we have a valid node, we insert it
      divElement.appendChild(this.options.node)
    } else {
      if (this.options.escapeMarkup) {
        divElement.innerText = this.options.text;
      } else {
        divElement.innerHTML = this.options.text;
      }

      if (this.options.avatar !== "") {
        let avatarElement: HTMLImageElement = document.createElement("img");
        avatarElement.src = this.options.avatar || "";

        avatarElement.className = "toastify-avatar";

        if (this.options.position == "left") {
          // Adding close icon on the left of content
          divElement.appendChild(avatarElement);
        } else {
          // Adding close icon on the right of content
          divElement.insertAdjacentElement("afterbegin", avatarElement);
        }
      }
    }

    // Adding a close icon to the toast
    if (this.options.close === true) {
      // Create a span for close element
      let closeElement = document.createElement("span");
      closeElement.innerHTML = "&#10006;";

      closeElement.className = "toast-close";

      // Triggering the removal of toast from DOM on close click
      closeElement.addEventListener(
        "click",
        (event) => {
          event.stopPropagation();
          this._removeElement(this.toastElement);
          window.clearTimeout(this.toastElement.timeOutValue);
        }
      );

      //Calculating screen width
      const width = window.innerWidth > 0 ? window.innerWidth : screen.width;

      // Adding the close icon to the toast element
      // Display on the right if screen width is less than or equal to 360px
      if ((this.options.position == "left") && width > 360) {
        // Adding close icon on the left of content
        divElement.insertAdjacentElement("afterbegin", closeElement);
      } else {
        // Adding close icon on the right of content
        divElement.appendChild(closeElement);
      }
    }

    // Clear timeout while toast is focused
    if (this.options.stopOnFocus && (this.options.duration || 0) > 0) {
      // stop countdown
      divElement.addEventListener(
        "mouseover",
        (event) => {
          window.clearTimeout(divElement.timeOutValue);
        }
      )
      // add back the timeout
      divElement.addEventListener(
        "mouseleave",
        () => {
          divElement.timeOutValue = window.setTimeout(
            () => {
              // Remove the toast from DOM
              this._removeElement(divElement);
            },
            this.options.duration
          )
        }
      )
    }

    // Adding an on-click destination path
    if (typeof this.options.destination !== "undefined") {
      divElement.addEventListener(
        "click",
        (event) => {
          event.stopPropagation();
          if (this.options.newWindow === true) {
            window.open(this.options.destination, "_blank");
          } else if (this.options.destination) {
            window.location.replace(this.options.destination);
          }
        }
      );
    }

    if (typeof this.options.onClick === "function" && typeof this.options.destination === "undefined") {
      divElement.addEventListener(
        "click",
        (event) => {
          event.stopPropagation();
          if (this.options.onClick) this.options.onClick();
        }
      );
    }

    // Adding offset
    if (typeof this.options.offset === "object") {

      const x = this._getAxisOffsetAValue("x", this.options);
      const y = this._getAxisOffsetAValue("y", this.options);

      const xOffset = this.options.position == "left" ? x : `-${x}`;
      const yOffset = this.options.gravity == "toastify-top" ? y : `-${y}`;

      divElement.style.transform = `translate(${xOffset},${yOffset})`;

    }

    // Returning the generated element
    return divElement;
  }

  /**
   * Remove the toast from the DOM
   * @param {Element} toastElement
   */
  private _removeElement(toastElement: HTMLElement) {
    // Hiding the element
    toastElement.className = toastElement.className.replace(" on", "");

    // Removing the element from DOM after transition end
    window.setTimeout(
      () => {
        // remove options node if any
        if (this.options.node && this.options.node.parentNode) {
          this.options.node.parentNode.removeChild(this.options.node);
        }

        // Remove the element from the DOM, only when the parent node was not removed before.
        if (toastElement.parentNode) {
          toastElement.parentNode.removeChild(toastElement);
        }

        // Calling the callback function
        if (this.options.callback)
          this.options.callback.call(toastElement);

        // Repositioning the toasts again
        this._reposition();
      },
      400
    ); // Binding `this` for function invocation
  }

  /**
   * Position the toast on the DOM
   * @private
   */
  private _reposition() {

    // Top margins with gravity
    let topLeftOffsetSize: Record<string, number> = {
      top: 15,
      bottom: 15,
    };
    let topRightOffsetSize: Record<string, number> = {
      top: 15,
      bottom: 15,
    };
    let offsetSize: Record<string, number> = {
      top: 15,
      bottom: 15,
    };

    // Get all toast messages that have been added to the container (selector)
    let allToasts = this._rootElement.querySelectorAll(".toastify");

    let classUsed: string;

    // Modifying the position of each toast element
    for (let i = 0; i < allToasts.length; i++) {
      // Getting the applied gravity
      if (allToasts[i].classList.contains("toastify-top") === true) {
        classUsed = "toastify-top";
      } else {
        classUsed = "toastify-bottom";
      }

      let height = allToasts[i].offsetHeight;
      classUsed = classUsed.slice(9, classUsed.length)
      // Spacing between toasts
      let offset = 15;

      let width = window.innerWidth > 0 ? window.innerWidth : screen.width;

      // Show toast in center if screen with less than or equal to 360px
      if (width <= 360) {
        // Setting the position
        allToasts[i].style[classUsed] = `${offsetSize[classUsed]}px`;

        offsetSize[classUsed] += height + offset;
      } else {
        if (allToasts[i].classList.contains("toastify-left") === true) {
          // Setting the position
          allToasts[i].style[classUsed] = `${topLeftOffsetSize[classUsed]}px`;

          topLeftOffsetSize[classUsed] += height + offset;
        } else {
          // Setting the position
          allToasts[i].style[classUsed] = `${topRightOffsetSize[classUsed]}px`;

          topRightOffsetSize[classUsed] += height + offset;
        }
      }
    }
  }

  /**
   * Helper function to get offset
   * @param {string} axis - 'x' or 'y'
   * @param {ToastifyConfigurationObject} options - The options object containing the offset object
   */
  private _getAxisOffsetAValue(axis: "x" | "y", options: ToastifyOptions) {

    if (options.offset)
      if (options.offset[axis]) {
        if (isNaN(options.offset[axis])) {
          return options.offset[axis];
        } else {
          return `${options.offset[axis]}px`;
        }
      }

    return '0px';

  }

}


// Returning the Toastify function to be assigned to the window object/module
function StartToastifyInstance(options: ToastifyOptions) {
  return new Toastify(options);
}

export default StartToastifyInstance;
